import React from 'react';

import Styled from 'styled-components';
import { Button, Icon } from 'antd';

const Section = Styled.section`
  width: 100%;
  height: 55px;
  background: #D6ECFD;
  padding: 10px 40px 10px 10px;
  margin-bottom: 8px;
`

const Title = Styled.p`
  float: left;
  margin-top: 10px;
  -webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
  &:hover {
    cursor: pointer;
    color: var(--primary-blue);
  }
`

interface IProps {
  data: any;
  setShow: Function;
  expanded: boolean;
  checkDel: Function;
}

export default function SectionItem({ data, setShow, expanded = false, checkDel }:IProps) {
  return (
    <Section>
      <Title
        onClick={e => setShow()}
      ><Icon type={expanded ? "caret-down" : "caret-right"} />&nbsp;{`${data.groupName || ''}${data.name}`}</Title>
      <Button style={{ float: 'right' }} type="primary" onClick={() => checkDel(data.id)}>删除该楼层</Button>
    </Section>
  )
}

